<template>
  <el-container>
    <el-header>
      <SmartNavBar>
        <GlobalHeader :show-border-bottom="false" :has-input="hasInput" :bg-color="false"></GlobalHeader>
      </SmartNavBar>
      <div class="index-banner" v-if="showBanner">
        <el-image :src="banner" fit="cover" style="height:160px;z-index:-90"></el-image>
        <div class="img-mask"></div>
      </div>

<!--      <TestHeader></TestHeader>-->
    </el-header>
<!--    <el-main :style="isMessage?'padding: 0':''">-->
    <el-main style="padding: 0">
      <div class="mainbox" :style="isMessage?'width:100%;':''">
        <teleport to="body">
          <div class="login" v-if="showLogin">
            <Login @close="handleClose"></Login>
          </div>
        </teleport>
        <router-view :key="$route.fullPath"></router-view>
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
import GlobalHeader from "@/components/GlobalHeader.vue";
import TestHeader from "@/components/TestHeader.vue";
import Login from "@/components/Login.vue";
import emitter from "@/utils/emitter.js";
import {onMounted, ref} from "vue";
import {useLoginStore} from "@/stores/LoginStore.js";
import SmartNavBar from "@/components/SmartNavBar.vue";
import {getCurrentBanner} from "@/api/api.js";
const loginStore = useLoginStore();
emitter.on('showLogin', (value) => {showLogin.value = value; });
const showLogin = ref(false);
const handleClose = () => {
  showLogin.value = false;
}
const hasInput = ref(true)
const isMessage = ref(false)

/* 顶部banner */
const banner = ref()
const showBanner = ref(false)
onMounted(async ()=>{
  emitter.on("hasBanner",(val)=>{
    showBanner.value = val
  })
  // 获取当前使用的banner图
  const res = await getCurrentBanner()
  banner.value = res.data.bannerImg
  console.log(res)
})
/* 顶部banner结束 */


onMounted( () => {

  emitter.on("showInput",(val)=>{
    if(val){
      console.log("展示搜索框")
    }else {
      console.log("隐藏搜索框")
    }
    hasInput.value = val
  })
  // console.log(loginStore.promptLogin)
  if(loginStore.promptLogin){
    console.log("展示登录框")
    showLogin.value = true;
  }
  emitter.on("isMessagePage",(val)=>{
    if(val){
      console.log("是消息页面")
    }else {
      console.log("不是消息页面")
    }
    isMessage.value = val
  })
  


})
</script>
<style scoped>
.el-main{
  //height: 1000px;
}

.el-header{
  width: 100%;
  padding: 0;
}


.index-banner{
  width: 100%;
  height: 160px;
  overflow: hidden;
  //background-color: yellow;
  .img-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 160px;
    z-index: -10;
    //background-color: rgba(0, 0, 0, 0.6);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  }
}
.mainbox{
  //background-color: #ffe0e0;
  //width: 1380px;
  width: 100%;
  margin: 0 auto;
  min-height: 650px;
  box-sizing: border-box;
  //background-color: black;
}
.login{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 100;
}
</style>